<template>
	<view class="tie-in-preview">
		<block v-if="show">
			<view class="go-list" @click="goUrl(2)" v-if="is_active">
				<image :src="icon"></image>
			</view>
			<movable-area class="edit-btn">
				<movable-view direction="all" class="edit-btn-img" v-if="is_preview">
					<image 
						:lazy-load="true" src="https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/icons/tie-in/edit.png" @click="goEdit">
					</image>
				</movable-view>
				<movable-view direction="all" class="edit-btn-img" v-if="is_link">
					<image 
						:lazy-load="true" src="https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/icons/proInfo/home.png" @click="goHome">
					</image>
				</movable-view>
				<movable-view direction="all" class="edit-btn-img">
					<image 
						src="https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/static/images/other/2022-03-16/20220316/3b74e1fabc2bcbb78841332bad939c84.png"
						style="width: 80rpx; height: 103rpx; bottom: 120rpx;"
						@click="goDesign">
					</image>
				</movable-view>
			</movable-area>
			<!-- #ifdef MP-WEIXIN -->
			<view class="ask-list-tips" v-if="appid==='wx9528157f77bff5d2' && is_preview">
				{{checked?'已开启动态推送':'点击开启动态推送'}}
				<u-switch v-model="checked" :loading="loading" :disabled="checked?true:false" active-color="#1eb500"></u-switch>
			</view>
			<!-- #endif -->
			<view class="tie-in-preview-banner">
				<view class="hot">
					人气：{{matchInfo.click}}
					<image 
						:lazy-load="true" 
						src="https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/icons/proInfo/hot.png" mode="widthFix"></image>
				</view>
				<swiper class="swiper" :indicator-dots="false" :autoplay="true" :interval="5000" @change="swiperChange" :style="{height: swiperHeight + 'px'}">
					<swiper-item v-for="(data,index) in swiperList" :key="index">
						<image 
							:lazy-load="true" 
							:src="data" 
							mode="widthFix" 
							:class="'slide-image slide-image-' + index" 
							@click="preview(data)" @load="imgLoad($event,index)"></image>
					</swiper-item>
				</swiper>
				<view class="dots"><text>{{swiperIndex+1}}</text>/{{swiperList.length}}</view>
			</view>
			<view class="tie-in-preview-info">
				<view class="info-top">
					<view class="info-top-left">
						<view class="name">{{matchInfo.name}}</view>
						<view class="tie-in-preview-price" v-if="isLogin">￥<text>{{matchInfo.price}}</text></view>
						<view v-else>
							<pt-noLogin></pt-noLogin>
						</view>
					</view>
					<view class="info-top-right" @click="like">
						<image
							src="https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/icons/tie-in/like.png" 
							v-if="!is_like"
							mode="widthFix">
						</image>
						<image 
							src="https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/icons/tie-in/like_on.png" mode="widthFix" v-else>
						</image>
						<text>点赞 {{matchInfo.like}}</text>
					</view>
				</view>
				<view class="tie-in-preview-des">
					<text>搭配理念：</text>
					{{matchInfo.remark?matchInfo.remark:''}}
				</view>
				<view class="info-tags-items">
					<view class="info-tags-item" @click="createdPoster">
						<image src="https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/static/images/other/2022-03-16/20220316/a68acce3971772fb0d41d60c4a729c9b.png"></image>
						<text>海报分享</text>
					</view>
					<!-- #ifdef MP-WEIXIN || APP-PLUS -->
					<view class="info-tags-item" @click="goDownCopy">
						<image src="https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/static/images/other/2022-03-16/20220316/d5a91a002df6ca1b9f6974e6fc9795a7.png"></image>
						<text>九宫格分享</text>
					</view>
					<!-- #endif -->
					<!-- #ifdef MP-WEIXIN || APP-PLUS -->
					<button open-type="share" class="info-tags-item" @click="appShare">
						<image src="https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/static/images/other/2022-03-16/20220316/be5de8ca25e63b9c435521bb3d4ec323.png"></image>
						<text>分享好友</text>
					</button>
					<!-- #endif -->
					<view class="info-tags-item" @click="goHome">
						<image src="https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/static/images/other/2022-03-17/20220317/781da017377f297ef592b9827677cfbb.png"></image>
						<text>方案列表</text>
					</view>
				</view>
			</view>
			<view class="like-users">
				<view class="like-user-avatar" v-if="likeUser.length">
					<image class="avatar" v-for="(data,index) in likeUser" :key="index" :src="data.heard_img"></image>
				</view>
				<view class="like-user-empty" v-else>还没有人点赞，赶快分享给朋友吧~</view>
				<view class="like-users-arrow" @click="goUserLike">
					<text>点赞</text>
					<u-icon name="arrow-right"></u-icon>
				</view>
			</view>
			<view class="tie-in-preview-detaild">
				<view class="tie-in-preview-detaild-list">
					<view class="tie-in-preview-detaild-item" v-for="(data,index) in matchInfo.goods" :key="index">
						<view class="space-item-name">
							<view class="space-item-name-left">
								<text class="name">{{data.space_name}}</text>
								<text class="price" v-if="isLogin">￥{{data.space_money}}</text>
							</view>
							<view class="space-item-name-right">
								<!-- {{data.checked}}
								<u-checkbox @change="selectSpace" v-model="data.checked" size="36" active-color="#141414"></u-checkbox> -->
								<view class="checkebox" :class="{active: data.checked}" @click="selectSpace(index)">
									<u-icon name="checkbox-mark" v-if="data.checked" color="#FFF" size="24"></u-icon>
								</view>
							</view>
						</view>
						<view class="space-item-classs">{{data.class_name.slice(0,data.class_name.length-1)}}</view>
						<view class="space-item-image"><image :src="data.goods[0].goods_image" mode="widthFix"></image></view>
						<scroll-view scroll-x class="space-item-goods-scroll">
							<view class="space-item-goods-list">
								<view class="space-item-goods-item" v-for="(goodsItem,i) in data.goods" :key="goodsItem.sku_id" @click="goProInfo(goodsItem.goods_id)">
									<image :lazy-load="true" :src="goodsItem.sku.img" mode="aspectFill"></image>
									<view class="goods-name">{{goodsItem.goods_name}}</view>
									<view class="price" v-if="isLogin">￥{{goodsItem.sku.retail_price}}(x{{goodsItem.num}})</view>
								</view>
							</view>
						</scroll-view>
					</view>
				</view>
			</view>
			<pt-loading-more v-if="isLoading"></pt-loading-more>
			<view class="tie-in-preview-detaild-imgs">
				<view class="tie-in-preview-detaild-imgs-tit">方案详情</view>
				<image
					:lazy-load="true" v-for="(imgItem,i) in allGoodsMainImg" 
					:key="i" 
					:src="imgItem"
					:style="{marginTop: '30rpx'}"
					mode="widthFix">
				</image>
			</view>
			<view class="tie-in-preview-bot">
				<view class="listing" @click="exportInventory">清单 <u-icon name="arrow-down" size="24" style="margin-left: 10rpx;"></u-icon></view>
				<view class="tie-in-preview-bot-btns">
					<view class="tie-in-preview-bot-price">
						<view class="tie-in-preview-bot-price-bottom" v-if="isLogin">合计<text>￥{{allAmount}}</text></view>
						<pt-noLogin v-else margin="10rpx 0 0"></pt-noLogin>
						<view class="tie-in-preview-bot-price-top">已选{{choseNum}}件商品</view>
					</view>
					<view class="add-car" @click="addCar">加入购物车</view>
					<view class="my-tie-in" @click="goBuy">立即购买</view>
				</view>
			</view>
		</block>
		<pt-loading></pt-loading>
		
		<!-- 海报 -->
		<uni-popup type="bottom" ref="poster" @change="posterFun" class="posterPopup">
			<view class="poster" v-if="showCanvas">
				<view class="close" @click="closePoster"><u-icon name="close" size="40" color="#FFF"></u-icon></view>
				<canvas id="poster" class="poster-canvas" canvas-id="poster" style="width: 600rpx; height: 945rpx;"></canvas>
				<view class="poster-share-btns">
					<!-- #ifdef APP-PLUS -->
					<view class="poster-share-btn" @click="imgShare(1)">
						<u-icon name="weixin-circle-fill" size="80" color="#31cc76"></u-icon>
						<view class="text">微信好友</view>
					</view>
					<view class="poster-share-btn" @click="imgShare(2)">
						<u-icon name="moments-circel-fill" size="80" color="#f59359"></u-icon>
						<view class="text">朋友圈</view>
					</view>
					<!-- #endif -->
					<!-- #ifdef APP-PLUS || MP-WEIXIN -->
					<view class="poster-share-btn" @click="savePoster">
						<view class="poster-share-btn-image">
							<image 
								:lazy-load="true" 
								src="https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/icons/proInfo/save.png" mode="aspectFit">
							</image>
						</view>
						<view class="text">保存图片</view>
					</view>
					<!-- #endif -->
					<!-- #ifdef H5 -->
					<view class="poster-share-btn">
						<view class="text">长按图片保存</view>
					</view>
					<!-- #endif -->
				</view>
			</view>
		</uni-popup>
		<!-- 海报 -->
		
		<uni-popup type="center" ref="activePoster">
			<view class="like-success"><image :src="tan_img" @click="goUrl(1)"></image></view>
		</uni-popup>
		
		<uni-popup type="center" ref="templeteMessage" :maskClick="false">
			<view class="templeteMessage-box">
				<view class="templeteMessage-box-close"><u-icon name="close" size="40" @click="closeTempleteMessage"></u-icon></view>
				<image :lazy-load="true" src="https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/icons/proInfo/tips.png?v=2"></image>
				<view class="templeteMessage-tit">打开活动状态提醒</view>
				<view class="templeteMessage-subtit">开启提醒，第一时间了解详情</view>
				<view class="templeteMessage-btn" @click="TemplateMessage">马上开启</view>
			</view>
		</uni-popup>
		
		<u-popup mode="bottom" v-model="showGoods" border-radius="10" z-index="99" closeable>
			<view class="pro-list-box">
				<view class="tit">
					<text>方案清单</text>
					<view class="export" @click="exportExcel">
						<image src="https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/static/images/other/2022-03-17/20220317/354984a56d9f902e15e7bb08716b087a.png"></image>
					</view>
				</view>
				<scroll-view scroll-y class="goods-list" style="max-height: 800rpx;">
					<view class="goods-sapce" v-for="(data,index) in matchInfo.goods" :key="index">
						<view class="space-tit">
							<view class="name">{{data.space_name}}<text>{{data.class_name}}</text></view>
							<view class="price">共计：￥<text>{{data.space_money}}</text></view>
						</view>
						<view class="space-goods">
							<view class="goods-item" v-for="(item,i) in data.goods" :key="i" @click="goProInfo(item.goods_id)">
								<view class="goods-img"><image :src="item.goods_image"></image></view>
								<view class="goods-info">
									<view class="goods-name">{{item.goods_name}}</view>
									<view class="goods-sku">{{item.sku.color}},{{item.sku.lining}},{{item.sku.size}}</view>
									<view class="goods-price">
										<text>￥<text>{{item.sku.retail_price}}</text></text>
										<view class="num">x{{item.num}}</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</u-popup>
		
		<pt-openSetting ref="openSetting" :tips="tips" @closeOpenSetting="closeOpenSetting"></pt-openSetting>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tips: '您已关闭订阅消息主开关，请打开主开关后重新开启消息回复推送',
				show: false,
				showTabs: false,
				tabsIndex: 0,
				tabs: [{
					name: '方案'
				},{
					name: '详情'
				}],
				background: {
					backgroundColor: 'rgba(255,255,255,0)',
				},
				top: 0,
				isLoading: false,
				showDetail: false,
				is_preview: false,
				is_update: false,
				match_id: '',
				matchInfo: '',
				choseNum: 0,
				allAmount: 0,
				swiperList: [],
				swiperHeight: 400,
				x: 0,
				y: 0,
				is_like: false,
				QRcode: '',
				showCanvas: false,
				content: "这是我精心设计全屋搭配方案",
				desc: "是朋友就给我点赞！！！",
				tips: "识别二维码给TA点赞",
				title: "“我家最好看”全屋搭配大比拼",
				is_link: false,
				likeUser: [],
				likeCount: 0,
				allGoodsMainImg: [],
				is_active: false,
				icon: '',
				icon_url: '',
				icon_url_type: '',
				tan_img: '',
				tan_url: '',
				tan_url_type: '',
				ban_img: '',
				ban_url: '',
				ban_url_type: '',
				appid: '',
				checked: false,
				loading: false,
				controlStatus: false,
				isLogin: false,
				swiperIndex: 0,
				showGoods: false,
			};
		},
		onLoad(options) {
			// 如果用户从分享的小程序卡片点击进来的,设置一个url缓存,登录后返回当前缓存url
			let pages = getCurrentPages();
			let curPage = pages[pages.length - 1];
			uni.setStorageSync('newurl',curPage.$page.fullPath)
			// 是否通过短链接跳转进入的
			if(options.is_link){
				this.is_link = true
			}
			// 通过场景二维码进入的商品详情
			let scene
			if(options.scene){
				scene = decodeURIComponent(options.scene)
				uni.setStorageSync('newurl','/tie-in/tie-in-preview?match_id='+this.filterUrlParam(scene).mid+'&parent_id='+this.filterUrlParam(scene).pid+'&link=1')
				if(this.filterUrlParam(scene).mid){
					this.match_id = this.filterUrlParam(scene).mid
				}
				if(this.filterUrlParam(scene).link){
					this.is_link = true
				}
			}
			if(options.is_update){
				this.is_update = true
			}
			if(options.is_preview){
				this.is_preview = true
			}
			if(options.match_id){
				this.match_id = options.match_id
			}
			if(options.parent_id){
				uni.setStorageSync('parent_id',options.parent_id)
				if(uni.getStorageSync('userInfo')){
					this.$u.api.binding_refer({id: options.parent_id}).catch(() => {
						console.log('接口报错：绑定失败')
					})
				}
			}
		},
		onShow() {
			if(uni.getStorageSync('userInfo')){
				this.isLogin = true
			}else{
				this.isLogin = false
			}
			// #ifdef MP-WEIXIN
			this.getWXAuth(1)
			this.appid = uni.getExtConfigSync().appid
			// #endif
			this.init()
			this.getShareConfig()
		},
		onReady() {
			setTimeout(() => {
				uni.setNavigationBarColor({
					frontColor: '#000000',
					backgroundColor: '',
					animation: {
						duration: 400,
						timingFunc: 'easeIn'
					}
				})
			},200)
		},
		watch: {
			checked(val) {
				if (val == true) {
					if(this.controlStatus == true) {
						this.controlStatus = false;
						return ;
					}
					this.checked = true;
					this.loading = true;
					this.openMessagePop();
				}
			}
		},
		methods: {
			appShare(){
				let user_id = uni.getStorageSync('userInfo')?JSON.parse(uni.getStorageSync('userInfo')).user_id:''
				let weburl = ''
				let url = ''
				if(user_id){
					url = '/tie-in/tie-in-preview?match_id='+this.match_id + '&parent_id=' + user_id
					weburl = 'https://master.jiaju01.com/web/shop/#/tie-in/tie-in-preview?match_id='+this.match_id + '&parent_id=' + user_id
				}else{
					url = '/tie-in/tie-in-preview?match_id='+this.match_id
					weburl = 'https://master.jiaju01.com/web/shop/#/tie-in/tie-in-preview?match_id='+this.match_id
				}
				uni.share({
					provider: "weixin",
					scene: "WXSceneSession",
					type: 5,
					imageUrl: this.matchInfo.img,
					title: this.matchInfo.name,
					miniProgram: {
						id: 'gh_acfd003d4328',
						path: url,
						type: 0,
						webUrl: weburl
					},
					success: function (res) {
						console.log(res)
					},
					fail: function (fail) {
						console.log(fail)
					}
				});
			},
			getWXAuth(type){
				uni.getSetting({
					withSubscriptions: true,
					success: (res) => {
						if(type){
							if(res.subscriptionsSetting.itemSettings){
								if(res.subscriptionsSetting.itemSettings['QliTA5SAA0Mgoh0ZK9EKjLzROuJPLDJppiGSy5Lx4iM'] && res.subscriptionsSetting.itemSettings['QliTA5SAA0Mgoh0ZK9EKjLzROuJPLDJppiGSy5Lx4iM']==='accept'){
									this.checked = true;
									this.controlStatus = true;
								}
							}
							return
						}
						if(res.subscriptionsSetting.itemSettings){
							if(res.subscriptionsSetting.itemSettings['QliTA5SAA0Mgoh0ZK9EKjLzROuJPLDJppiGSy5Lx4iM']){
								this.checked = true;
								uni.showToast({
									icon: 'none',
									title: '已开启动态通知',
									duration: 1500
								})
							}else{
								this.checked = false;
								uni.showToast({
									icon: 'none',
									title: '您未选择“总是保持以上选择，不再询问”，通知仅此次有效',
									duration: 1500
								})
							}
						}else{
							this.checked = false;
							uni.showToast({
								icon: 'none',
								title: '您未选择“总是保持以上选择，不再询问”，通知仅此次有效',
								duration: 1500
							})
						}
					}
				})
			},
			openMessagePop(){
				uni.getSetting({
					withSubscriptions: true,
					success: (success) => {
						if(!success.subscriptionsSetting.mainSwitch){
							this.loading = false
							this.checked = false
							this.tips = '您已关闭订阅消息主开关，请打开主开关后重新开启消息回复推送'
							this.$refs.openSetting.init()
						}else{
							this.$refs.templeteMessage.open()
						}
					}
				})
			},
			TemplateMessage() {
				uni.requestSubscribeMessage({
					tmplIds: [
						'QliTA5SAA0Mgoh0ZK9EKjLzROuJPLDJppiGSy5Lx4iM'
					],
					complete: (e) => {
						let name = e['QliTA5SAA0Mgoh0ZK9EKjLzROuJPLDJppiGSy5Lx4iM']
						switch (name){
							case 'accept':
								this.getWXAuth()
								this.loading = false;
								this.$refs.templeteMessage.close()
								break;
							case 'reject':
								uni.showToast({
									icon: 'none',
									title: '您已拒绝接收通知，将不会收到动态通知'
								})
								this.checked = false;
								this.loading = false;
								this.$refs.templeteMessage.close()
								break;
						}
					}
				})
			},
			closeTempleteMessage(){
				this.$refs.templeteMessage.close()
				this.checked = false
				this.loading = false
			},
			addFoot(where){
				this.$u.api.AddFoot({
					// #ifdef MP-WEIXIN
					type: 1,
					// #endif
					// #ifdef APP-PLUS
					type: 2,
					// #endif
					// #ifdef H5
					type: 3,
					// #endif
					store_id: uni.getStorageSync('userInfo')?JSON.parse(uni.getStorageSync('userInfo')).store_id:'',
					client: 1,
					where: where,
					stay_time: 0,
					goods_id: 0,
					store_goods_id: 0,
					is_new: 1
				})
			},
			// 获取海报分享配置
			getShareConfig(){
				this.$u.api.MatchShareInfo().then(res => {
					this.content = res.datas.content
					this.desc = res.datas.desc
					this.tips = res.datas.tips
					this.title = res.datas.title
					if(res.datas.ban_show==1){
						this.is_active = true
						this.icon = res.datas.icon
						this.icon_url = res.datas.icon_url
						this.icon_url_type = res.datas.icon_url_type
						this.tan_img = res.datas.tan_img
						this.tan_url = res.datas.tan_url
						this.tan_url_type = res.datas.tan_url_type
						this.ban_img = res.datas.ban_img
						this.ban_url = res.datas.ban_url
						this.ban_url_type = res.datas.ban_url_type
					}
				})
			},
			// 获取二维码
			getQRcode(){
				this.$u.api.matchQRcode({mid: this.match_id}).then(res => {
					this.QRcode = res.datas
				}).then(() => {
					this.OnCanvas()
				}).catch(() => {
					uni.showToast({
						icon: 'none',
						title: '生成失败，请重试!'
					})
					this.$refs.poster.close()
				})
			},
			// 解析小程序scene参数
			filterUrlParam(urlSearch){
			  let ret = {}
			  let regParam = /([^&=]+)=([\w\W]*?)(&|$|#)/g
			  if (urlSearch) {
			    var strParam = urlSearch;
			    var result
			    while ((result = regParam.exec(strParam)) != null) {
			      ret[result[1]] = result[2]
			    }
			  }
			  return ret
			},
			init(){
				this.$u.api.matchList({match_id: this.match_id, paramter: 1}).then(res => {
					this.show = true
					this.choseNum = 0
					if(res.datas[0]){
						if(res.datas[0].is_like==1){
							this.is_like = true
						}
						this.matchInfo = res.datas[0]
						this.allAmount = res.datas[0].price
						let allGoodsImgs = []
						this.swiperList = [res.datas[0].img]
						this.matchInfo.goods.forEach(item => {
							this.$set(item,'checked',true)
							if(item.goods.length){
								item.goods.forEach((data,dataIndex) => {
									allGoodsImgs.push(data.goods_image)
									if(dataIndex==0){
										this.swiperList.push(data.goods_image)
									}
									this.choseNum++
								})
							}
						})
						this.allGoodsMainImg = this.dedupe(allGoodsImgs)
						if(this.is_preview && !this.is_update){
							uni.showToast({
								icon: 'none',
								title: '方案创建成功'
							})
						}else if(this.is_preview && this.is_update){
							uni.showToast({
								icon: 'none',
								title: '方案修改成功'
							})
						}
					}else{
						uni.showToast({
							icon: 'none',
							title: '方案已被删除'
						})
						setTimeout(() => {
							uni.switchTab({
								url: '/pages/tie-in-list/tie-in-list'
							})
						},1500)
					}
				}).then(() => {
					this.getLikeUser()
				})
			},
			// 加入购物车
			addCar(){
				if(uni.getStorageSync('userInfo')){
					let cart = []
					if(this.matchInfo.goods.length){
						this.matchInfo.goods.forEach(item => {
							if(item.checked){
								if(item.goods.length){
									item.goods.forEach(data => {
										cart.push({
											user_id: JSON.parse(uni.getStorageSync('userInfo')).user_id,
											store_id: data.store_id,
											sku_id: data.sku_id,
											num: data.num,
											goods_id: data.goods_id,
											from: 2,
											type_id: data.type_id
										})
									})
								}
							}
						})
					}
					if(!this.choseNum){
						uni.showToast({
							icon: 'none',
							title: '请选择需要加入购物车的空间'
						})
						return false
					}
					uni.showModal({
						title: '温馨提示',
						content: '是否确认把所选商品加入购物车？',
						success: (confirm) => {
							if(confirm.confirm){
								this.$u.api.AddMatchCart({cart: JSON.stringify(cart)}).then(res => {
									uni.showToast({
										icon: 'none',
										title: '成功加入购物车',
										success: () => {
											setTimeout(() => {
												uni.navigateTo({
													animationDuration: 500,
													url: '/pages/car/car?from=2'
												})
											},1500)
										}
									})
								})
							}
						}
					})
				}else{
					uni.showModal({
						content: '该功能需要登录体验，是否登录？',
						confirmText: '登录',
						cancelText: '取消',
						success: (res) => {
							if(res.confirm){
								// #ifdef APP-PLUS
								uni.navigateTo({
									animationDuration: 500,
									url: '/pages/login/app-login'
								})
								// #endif
								// #ifdef MP-WEIXIN || H5
								uni.navigateTo({
									animationDuration: 500,
									url: '/pages/login/login'
								})
								// #endif
							}
						}
					})
				}
			},
			goBuy(){
				if(uni.getStorageSync('userInfo')){
					let cart = []
					if(this.matchInfo.goods.length){
						this.matchInfo.goods.forEach(item => {
							if(item.checked){
								if(item.goods.length){
									item.goods.forEach(data => {
										cart.push({
											user_id: JSON.parse(uni.getStorageSync('userInfo')).user_id,
											store_id: data.store_id,
											sku_id: data.sku_id,
											num: data.num,
											goods_id: data.goods_id,
											from: 2,
											type_id: data.type_id
										})
									})
								}
							}
						})
					}
					if(!this.choseNum){
						uni.showToast({
							icon: 'none',
							title: '请选择需要购买的空间'
						})
						return false
					}
					this.$u.api.AddMatchCart({cart: JSON.stringify(cart)}).then(res => {
						uni.navigateTo({
							animationDuration: 500,
							url: '/pages/car/confirmOrder/confirmOrder?ids=' + res.datas.join(',')
						})
					})
				}else{
					uni.showModal({
						content: '该功能需要登录体验，是否登录？',
						confirmText: '登录',
						cancelText: '取消',
						success: (res) => {
							if(res.confirm){
								// #ifdef APP-PLUS
								uni.navigateTo({
									animationDuration: 500,
									url: '/pages/login/app-login'
								})
								// #endif
								// #ifdef MP-WEIXIN || H5
								uni.navigateTo({
									animationDuration: 500,
									url: '/pages/login/login'
								})
								// #endif
							}
						}
					})
				}
			},
			// 跳转编辑
			goEdit(){
				let pages = getCurrentPages();
				let prevPage = pages[pages.length - 2]
				// #ifdef MP-WEIXIN || H5
				prevPage.$vm.tieIn.match_id = this.matchInfo.match_id
				// #endif
				// #ifdef APP-PLUS
				let tieIn = {
					match_id: this.matchInfo.match_id
				}
				uni.setStorageSync('tieIn',JSON.stringify(tieIn))
				// #endif
				uni.navigateBack({
					animationDuration: 500
				})
			},
			// 选择空间
			selectSpace(index){
				this.choseNum = 0
				this.matchInfo.goods[index].checked = !this.matchInfo.goods[index].checked
				this.matchInfo.goods.forEach(item => {
					if(item.checked){
						if(item.goods.length){
							item.goods.forEach(data => {
								this.choseNum++
							})
						}
					}
				})
				this.calculate()
			},
			// 重新计算价格
			calculate(){
				this.allAmount = 0
				this.matchInfo.goods.forEach(item => {
					if(item.checked){
						if(item.goods.length){
							item.goods.forEach(data => {
								this.allAmount += data.sku.retail_price * data.num
							})
						}
					}
				})
			},
			// 商品详情
			goProInfo(goods_id){
				getApp().goProInfo(goods_id)
			},
			// 切换详情
			changeTabs(e){
				this.tabsIndex = e
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 0
				})
				if(e>0){
					this.background.backgroundColor = 'rgba(255,255,255,1)'
					this.showTabs = true
				}else{
					this.background.backgroundColor = 'rgba(255,255,255,0)'
					this.showTabs = false
				}
				if(uni.getStorageSync('userInfo')){
					this.addFoot('方案-搭配助手-详情长图')
				}
			},
			// 导出清单
			exportInventory(){
				if(uni.getStorageSync('userInfo')){
					this.showGoods = true
					this.addFoot('方案-搭配助手-清单')
				}else{
					// #ifdef APP-PLUS
					uni.navigateTo({
						animationDuration: 500,
						url: '/pages/login/app-login'
					})
					// #endif
					// #ifdef MP-WEIXIN || H5
					uni.navigateTo({
						animationDuration: 500,
						url: '/pages/login/login'
					})
					// #endif
				}
			},
			// 跳转购买
			goMyTieIn(){
				if(uni.getStorageSync('userInfo')){
					this.addFoot('方案-搭配助手-直接购买')
					// uni.switchTab({
					// 	url: '/pages/tie-in-list/tie-in-list'
					// })
				}else{
					// #ifdef APP-PLUS
					uni.navigateTo({
						animationDuration: 500,
						url: '/pages/login/app-login'
					})
					// #endif
					// #ifdef MP-WEIXIN || H5
					uni.navigateTo({
						animationDuration: 500,
						url: '/pages/login/login'
					})
					// #endif
				}
			},
			goDesign(){
				if(uni.getStorageSync('userInfo')){
					this.addFoot('方案-搭配助手-我也要设计')
					uni.removeStorageSync('tieIn')
					uni.navigateTo({
						animationDuration: 500,
						url: '/tie-in/tie-in'
					})
				}else{
					// #ifdef APP-PLUS
					uni.navigateTo({
						animationDuration: 500,
						url: '/pages/login/app-login'
					})
					// #endif
					// #ifdef MP-WEIXIN || H5
					uni.navigateTo({
						animationDuration: 500,
						url: '/pages/login/login'
					})
					// #endif
				}
			},
			swiperChange(e){
				let query = uni.createSelectorQuery().in(this),
						class_name = '.slide-image-' + e.detail.current
				this.swiperIndex = e.detail.current
				query.select(class_name).boundingClientRect(res => {
					if(res){
						this.swiperHeight = res.height
					}
				}).exec();
			},
			imgLoad(e,index){
				if(index==0){
					this.swiperHeight = Math.floor(750*uni.getSystemInfoSync().windowWidth/750*e.detail.height/e.detail.width)
				}
			},
			preview(current){
				uni.previewImage({
					current: current,
					urls: this.swiperList
				})
			},
			like(e){
				if(this.is_like){
					uni.showToast({
						icon: 'none',
						title: '您已经点过赞了,不可重复点赞',
						duration: 1500
					})
					return false
				}
				this.$u.api.likeMatch({match_id: this.matchInfo.match_id}).then(res => {
					uni.showToast({
						icon: 'none',
						title: '点赞成功',
						success: () => {
							this.is_like = true
							this.matchInfo.like++
							this.getLikeUser()
							if(this.is_active){
								this.$refs.activePoster.open()
							}
						}
					})
				})
			},
			// app分享
			share(){
				// #ifdef APP-PLUS
				if(uni.getStorageSync('userInfo')){
					this.addFoot('方案-搭配助手-分享好友')
				}
				let user_id = JSON.parse(uni.getStorageSync('userInfo')).user_id?JSON.parse(uni.getStorageSync('userInfo')).user_id:''
				uni.share({
					provider: "weixin",
					scene: "WXSceneSession",
					type: 5,
					imageUrl: this.matchInfo.img,
					title: '来看看我家的全屋软装方案，好看就点个赞！',
					miniProgram: {
						id: 'gh_acfd003d4328',
						path: '/tie-in/tie-in-preview?match_id='+this.match_id + '&parent_id='+user_id + '&is_link=true',
						type: 0,
						webUrl: 'https://master.jiaju01.com/web/shop/#/tie-in/tie-in-preview?match_id=102'
					},
					success: function (res) {
						console.log(res)
						uni.showToast({
							icon: 'none',
							title: '分享成功'
						})
					},
					fail: function (fail) {
						console.log(fail)
						// uni.showToast({
						// 	icon: 'none',
						// 	title: '分享成功'
						// })
					}
				});
				// #endif
			},
			// 生成海报
			async OnCanvas() {
				uni.showLoading()
				let _this = this;
				_this.ctx = uni.createCanvasContext('poster',_this);
				const systemInfo = uni.getSystemInfoSync()
				const proImgInfo = await _this.getImageInfo({ imgSrc: _this.matchInfo.img }); // 商品图
				const avatarImgInfo = await _this.getImageInfo({ imgSrc: JSON.parse(uni.getStorageSync('userInfo')).heard_img }); // 头像
				const QRcodeImgInfo = await _this.getImageInfo({ imgSrc: _this.QRcode }); // 二维码
				_this.canvasW = uni.upx2px(600);
				_this.canvasH = uni.upx2px(945);
				_this.ctx.setFillStyle('#FFF');
				_this.ctx.fillRect(0,0,_this.canvasW,_this.canvasH)
				
				// 绘制主图
				_this.ctx.drawImage(proImgInfo.path, 10, 10, uni.upx2px(560), uni.upx2px(560));
				
				// 绘制灰色色块
				_this.ctx.setFillStyle('#F7F7F7');
				_this.ctx.fillRect(uni.upx2px(20),uni.upx2px(580),uni.upx2px(560),uni.upx2px(150))
				
				// 绘制文案1
				const title = _this.title
				_this.ctx.setFontSize(uni.upx2px(28));
				_this.ctx.setFillStyle('#141414');
				_this.ctx.fillText(title, uni.upx2px(20) , uni.upx2px(800));
				
				// 绘制文案2
				const subTitle = _this.content
				_this.ctx.setFontSize(uni.upx2px(20));
				_this.ctx.setFillStyle('#808080');
				_this.ctx.fillText(subTitle, uni.upx2px(20) , uni.upx2px(850));
				
				// 绘制文案3
				const lastTitle = _this.desc
				_this.ctx.setFontSize(uni.upx2px(20));
				_this.ctx.setFillStyle('#808080');
				_this.ctx.fillText(lastTitle, uni.upx2px(20) , uni.upx2px(880));
				
				// 绘制二维码提示
				const tips = _this.tips
				_this.ctx.setFillStyle('#6B6B6B');
				_this.ctx.setFontSize(uni.upx2px(20));
				_this.ctx.fillText(tips, uni.upx2px(390) , uni.upx2px(910));
				
				// 保存
				_this.ctx.save()
				
				//绘制用户名称跟背景
				const name = JSON.parse(uni.getStorageSync('userInfo')).nickname
				_this.roundRectColor(_this.ctx, uni.upx2px(300), uni.upx2px(580), uni.upx2px(20), uni.upx2px(20), uni.upx2px(40));
				_this.ctx.setFontSize(uni.upx2px(20));
				_this.ctx.setFillStyle('#808080');
				_this.ctx.textAlign = 'center';
				_this.ctx.fillText(name, uni.upx2px(300) , uni.upx2px(645));
				
				// 绘制方案名称
				const matchName = _this.matchInfo.name
				_this.ctx.setFontSize(uni.upx2px(24));
				_this.ctx.setFillStyle('#141414');
				_this.ctx.textAlign = 'center';
				_this.ctx.fillText(matchName, uni.upx2px(300) , uni.upx2px(695));
				
				
				// 绘制头像
				_this.ctx.beginPath()
				_this.ctx.arc(uni.upx2px(300), uni.upx2px(580), uni.upx2px(20), 0, 2*Math.PI);
				_this.ctx.fillStyle= "#FFF";//半透明的红色
				_this.ctx.fill();
				_this.ctx.strokeStyle="#FFF";//红色
				_this.ctx.stroke();
				_this.ctx.beginPath()
				_this.ctx.arc(uni.upx2px(300), uni.upx2px(580), uni.upx2px(35), 0, 2*Math.PI);
				_this.ctx.clip()
				_this.ctx.stroke();
				_this.ctx.drawImage(avatarImgInfo.path, uni.upx2px(265), uni.upx2px(545), uni.upx2px(70), uni.upx2px(70))
				_this.ctx.restore()
				
				// 绘制二维码
				_this.ctx.drawImage(QRcodeImgInfo.path, uni.upx2px(438), uni.upx2px(752), uni.upx2px(128), uni.upx2px(128));
				
				//延迟后渲染至canvas上
				setTimeout(function() {
					uni.hideLoading()
					_this.ctx.draw();
				}, 600);
			},
			async roundRectColor(context, x, y, w, h, r) {  //绘制圆角矩形（纯色填充）
			  context.save();
			  context.setFillStyle("transparent");
			  context.setStrokeStyle('transparent')
			  context.setLineJoin('round');  //交点设置成圆角
			  context.setLineWidth(r);
			  context.strokeRect(x + r/2, y + r/2, w - r , h - r );
			  context.fillRect(x + r, y + r, w - r * 2, h - r * 2);
			  context.stroke();
			  context.closePath();
			},
			async getImageInfo({ imgSrc }) {
				uni.showLoading({
					title: '正在生成海报',
					mask: true
				})
				return new Promise((resolve, errs) => {
					if(imgSrc.indexOf('https')!=-1){
						uni.downloadFile({
							url: imgSrc,
							success:function(res){
								uni.getImageInfo({
									src: res.tempFilePath,
									success: function(image) {
										uni.hideLoading()
										resolve(image);
									},
									fail(err) {
										uni.hideLoading()
										uni.showToast({
											title: '生成失败，请退出重试',
											icon: 'none',
											duration: 1500
										})
										errs(err);
									}
								});
							}
						})
					}else{
						uni.getImageInfo({
							src: imgSrc,
							success: function(image) {
								uni.hideLoading()
								resolve(image);
							},
							fail(err) {
								uni.hideLoading()
								uni.showToast({
									title: '生成失败，请退出重试',
									icon: 'none',
									duration: 1500
								})
								errs(err);
							}
						});
					}
				});
			},
			posterFun(e){
				this.showCanvas = e.show
			},
			// canvas
			createdPoster(){
				if(uni.getStorageSync('userInfo')){
					this.addFoot('方案-搭配助手-海报分享')
					this.$refs.poster.open()
					this.$nextTick(() => {
						if(uni.getStorageSync('userInfo')){
							this.getQRcode()
						}else{
							uni.showToast({
								icon: 'none',
								title: '请先登录'
							})
							setTimeout(() => {
								// #ifdef APP-PLUS
								uni.navigateTo({
									animationDuration: 500,
									url: '/pages/login/app-login'
								})
								// #endif
								// #ifdef MP-WEIXIN
								uni.navigateTo({
									animationDuration: 500,
									url: '/pages/login/login'
								})
								// #endif
							},1500)
						}
					})
				}else{
					uni.navigateTo({
						url: '/pages/login/login'
					})
				}
			},
			savePoster(){
				uni.showLoading({
					title: '正在保存',
					mask: true
				})
				uni.canvasToTempFilePath({
					width: uni.upx2px(600),
					height: uni.upx2px(945),
					destWidth: 600,
					destHeight: 945,
				  canvasId: 'poster',
					success: (data) => {
						uni.hideLoading()
						// #ifdef APP-PLUS || H5
						uni.saveImageToPhotosAlbum({
							filePath: data.tempFilePath,
							success: (saveRes) => {
								uni.showToast({
									icon: 'none',
									title: '保存成功，请在相册中查看',
									duration: 1500
								})
							},
							fail: (fail) => {
								uni.showToast({
									icon: 'none',
									title: '已取消保存'
								})
							}
						})
						// #endif
						// #ifdef MP-WEIXIN
						uni.getSetting({
							withSubscriptions: true,
							success: (scope) => {
								if(!scope.authSetting['scope.writePhotosAlbum']){
									uni.authorize({
										scope: 'scope.writePhotosAlbum',
										success: () => {
											uni.saveImageToPhotosAlbum({
												filePath: data.tempFilePath,
												success: (saveRes) => {
													uni.showToast({
														icon: 'none',
														title: '保存成功，请在相册中查看',
														duration: 1500
													})
												},
												fail: (fail) => {
													uni.showToast({
														icon: 'none',
														title: '已取消保存'
													})
												}
											})
										},
										fail: () => {
											// uni.showToast({
											// 	icon: 'none',
											// 	title: '您已关闭相册访问开关，请开启后重新保存'
											// })
											this.$refs.openSetting.init()
										}
									})
								}else{
									uni.saveImageToPhotosAlbum({
										filePath: data.tempFilePath,
										success: (saveRes) => {
											uni.showToast({
												icon: 'none',
												title: '保存成功，请在相册中查看',
												duration: 1500
											})
										},
										fail: (fail) => {
											uni.showToast({
												icon: 'none',
												title: '已取消保存'
											})
										}
									})
								}
							}
						})
						// #endif
					}
				})
			},
			closePoster(){
				this.$refs.poster.close()
			},
			imgShare(type){
				switch (Number(type)){
					case 1:
						uni.canvasToTempFilePath({
							width: uni.upx2px(600),
							height: uni.upx2px(945),
							destWidth: 600,
							destHeight: 945,
						  canvasId: 'poster',
						  success: function(data) {
								uni.share({
									provider: 'weixin',
									scene: 'WXSceneSession',
									type: 2,
									imageUrl: data.tempFilePath
								})
						  }
						})
						break;
					case 2:
						uni.canvasToTempFilePath({
							width: uni.upx2px(600),
							height: uni.upx2px(945),
							destWidth: 600,
							destHeight: 945,
						  canvasId: 'poster',
						  success: function(data) {
								uni.share({
									provider: 'weixin',
									scene: 'WXSenceTimeline',
									type: 2,
									imageUrl: data.tempFilePath
								})
						  }
						})
						break;
				}
			},
			dedupe(array) {
				return Array.from(new Set(array));
			},
			goDownCopy(){
				if(!uni.getStorageSync('userInfo')){
					// #ifdef APP-PLUS
					uni.navigateTo({
						animationDuration: 500,
						url: '/pages/login/app-login'
					})
					// #endif
					// #ifdef MP-WEIXIN || H5
					uni.navigateTo({
						animationDuration: 500,
						url: '/pages/login/login'
					})
					// #endif
				}else{
					this.$u.api.matchQRcode({mid: this.match_id}).then(res => {
						let imgs = [res.datas]
						this.matchInfo.goods.forEach(item => {
							if(item.goods.length){
								item.goods.forEach(data => {
									imgs.push(data.goods_image)
								})
							}
						})
						uni.navigateTo({
							animationDuration: 500,
							url: '/tie-in/down-copy?match_id='+this.match_id+'&name='+this.matchInfo.name+'&remark='+this.matchInfo.remark+'&price='+this.matchInfo.price+'&goods_img='+JSON.stringify(this.dedupe(imgs))
						})
						this.addFoot('方案-搭配助手-九宫格')
					})
				}
			},
			goHome(){
				uni.switchTab({
					url: '/pages/tie-in-list/tie-in-list'
				})
			},
			getLikeUser(){
				this.$u.api.likeList({match_id: this.match_id,limit: 5}).then(res => {
					this.likeCount = res.counts
					this.likeUser = res.datas
				})
			},
			goUserLike(){
				uni.navigateTo({
					animationDuration: 500,
					url: '/tie-in/user-like?match_id='+this.match_id
				})
			},
			goUrl(type){
				if(!uni.getStorageSync('userInfo')){
					// #ifdef APP-PLUS
					uni.navigateTo({
						animationDuration: 500,
						url: '/pages/login/app-login'
					})
					// #endif
					// #ifdef MP-WEIXIN || H5
					uni.navigateTo({
						animationDuration: 500,
						url: '/pages/login/login'
					})
					// #endif
				}else{
					switch (Number(type)){
						case 0:
							this.addFoot('方案-方案详情-广告位')
							if(this.ban_url_type==1){
								uni.switchTab({
									url: '/pages/tie-in-list/tie-in-list'
								})
							}else{
								uni.navigateTo({
									animationDuration: 500,
									url: this.ban_url
								})
							}
							break;
						case 1:
							this.addFoot('方案-方案详情-点赞-弹窗')
							if(this.tan_url_type==1){
								uni.switchTab({
									url: this.tan_url
								})
							}else{
								uni.navigateTo({
									animationDuration: 500,
									url: this.tan_url
								})
							}
							break;
						case 2:
							this.addFoot('方案-方案详情-比赛详情')
							if(this.icon_url_type==1){
								uni.switchTab({
									url: this.icon_url
								})
							}else{
								uni.navigateTo({
									animationDuration: 500,
									url: this.icon_url
								})
							}
							break;
					}
				}
			},
			closeTempleteMessage(){
				this.$refs.templeteMessage.close()
				this.checked = false
				this.loading = false
			},
			closeOpenSetting(){
				this.checked = false
				this.loading = false
			},
			exportExcel(){
				let goods = []
				this.matchInfo.goods.forEach(item => {
					if(item.goods.length){
						item.goods.forEach(data => {
							goods.push({
								goods_id: data.goods_id,
								sku_id: data.sku_id,
								goods_number: data.num
							})
						})
					}
				})
				// #ifdef H5
				uni.showLoading({
					title: '正在导出'
				})
				this.$u.api.matchExport({goods_list: JSON.stringify(goods)}).then(res => {
					uni.showToast({
						icon: 'none',
						title: '导出成功'
					})
					window.open(res.datas)
				})
				// #endif
				// #ifdef MP-WEIXIN || APP-PLUS
				uni.showLoading({
					title: '正在导出'
				})
				let name = new Date().getTime()
				this.$u.api.matchExport({goods_list: JSON.stringify(goods)}).then(res => {
					uni.downloadFile({
						url: res.datas,
						// #ifdef MP-WEIXIN
						filePath: wx.env.USER_DATA_PATH + '/' + name + '.xlsx',
						// #endif
						success: (downRes) => {
							// #ifdef MP-WEIXIN
							let filePath = downRes.filePath;
							// #endif
							// #ifdef APP-PLUS
							let filePath = downRes.tempFilePath;
							// #endif
							uni.openDocument({
								filePath: filePath,
								fileType: 'xlsx',
								showMenu: true,
								success: (success) => {
									console.log('打开文档成功', success)
								},
								fail: (fail) => {
									console.log('打开文档失败', fail)
									uni.showToast({
										icon: 'none',
										title: '导出失败，请重试',
									})
								},
								complete: () => {
									uni.hideLoading()
								}
							})
						}
					})
				})
				// #endif
			}
		},
		onShareAppMessage(e) {
			if(uni.getStorageSync('userInfo')){
				if(e.target){
					this.addFoot('方案-搭配助手-分享好友')
				}else{
					this.addFoot('方案-搭配助手-小程序右上角分享')
				}
			}
			let user_id = JSON.parse(uni.getStorageSync('userInfo')).user_id?JSON.parse(uni.getStorageSync('userInfo')).user_id:''
			return {
				title: '来看看我家的全屋软装方案，好看就点个赞！',
				path: '/tie-in/tie-in-preview?match_id='+ this.match_id + '&parent_id='+user_id+'&is_link=true',
				imageUrl: this.matchInfo.img
			}
		}
	}
</script>

<style lang="scss">
	page{
		background-color: rgba(248,248,248,1);
	}
	@font-face {
		font-family: 'din';
		src: url('https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/icons/recomBrand/DIN-Bold.ttf') format('truetype');
	}
	.posterPopup /deep/ .uni-transition,.posterPopup /deep/ .uni-popup__wrapper-box{
		height: 100%;
	}
	.tie-in-preview{
		padding: 1rpx 0 120rpx;
		.go-list{
			position: fixed;
			top: 50%;
			right: 0;
			transform: translateY(-50%);
			z-index: 10;
			image{
				width: 111rpx;
				height: 47rpx;
			}
		}
		.product-download-copy{
			height: 60rpx;
			line-height: 60rpx;
			background: #F6F6F6;
			border-radius: 8rpx;
			text-align: center;
			font-size: 24rpx;
			color: #141414;
			display: flex;
			align-items: center;
			justify-content: center;
			margin: 0 30rpx;
			image{
				width: 30rpx;
				height: 30rpx;
			}
			.name{
				margin: 0 10rpx 0 20rpx;
			}
			/deep/ .u-icon{
				margin-top: 4rpx;
			}
		}
		.tie-in-preview-navbar{
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			background-color: #FFF;
			display: flex;
			align-items: center;
			justify-content: center;
			z-index: 10;
			border-bottom: solid 1px #EEE;
			/deep/ .u-slot-content{
				justify-content: center;
				.u-tabs{
					width: 50%;
					/* #ifdef MP */
					width: 100%;
					/* #endif */
				}
			}
		}
		.edit-btn{
			position: fixed !important;
			left: 0;
			top: 0;
			bottom: 140rpx;
			left: 10rpx;
			right: 10rpx;
			pointer-events: none;
			z-index: 20;
			width: auto;
			height: auto;
			.edit-btn-img{
				position: absolute !important;
				width: 80rpx;
				height: 80rpx;
				pointer-events: auto;
				border-radius: 50%;
				top: initial;
				left: initial;
				right: 0;
				bottom: 0;
				bottom: constant(safe-area-inset-bottom);
				bottom: env(safe-area-inset-bottom);
				text-align: center;
				image{
					width: 80rpx;
					height: 80rpx;
				}
			}
		}
		.tie-in-preview-banner{
			position: relative;
			.dots{
				position: absolute;
				right: 30rpx;
				bottom: 30rpx;
				background-color: rgba(0,0,0,.3);
				color: #FFF;
				line-height: 36rpx;
				border-radius: 36rpx;
				padding: 0 20rpx;
				font-size: 22rpx;
				z-index: 1;
				text{
					font-weight: bold;
					font-size: 28rpx;
				}
			}
			image{
				width: 100%;
			}
			.hot{
				position: absolute;
				right: 40rpx;
				top: 30rpx;
				z-index: 10;
				background-color: #FFF;
				border: solid 2rpx #dbdbdb;
				border-radius: 6rpx;
				color: #858585;
				font-size: 20rpx;
				height: 50rpx;
				line-height: 46rpx;
				padding: 0 20rpx;
				image{
					position: absolute;
					width: 25rpx;
					height: 16rpx;
					right: 20rpx;
					bottom: -14rpx;
				}
			}
		}
		.tie-in-preview-info{
			padding: 30rpx;
			background-color: #FFF;
			.info-top{
				display: flex;
				align-items: center;
				justify-content: space-between;
				.info-top-left{
					.name{
						font-size: 30rpx;
						font-weight: bold;
						color: #141414;
					}
					.tie-in-preview-price{
						color: #F59359;
						font-family: 'din';
						margin-top: 20rpx;
						text{
							font-size: 42rpx;
						}
					}
				}
				.info-top-right{
					display: flex;
					flex-direction: column;
					align-items: center;
					image{
						width: 35rpx;
					}
					text{
						font-size: 22rpx;
						color: #757575;
						margin-top: 10rpx;
					}
				}
			}
			.tie-in-preview-des{
				margin-top: 40rpx;
				color: #909090;
				font-size: 24rpx;
				text{
					font-weight: bold;
					color: #444;
				}
			}
			.info-tags-items{
				display: flex;
				background-color: #F9F9F9;
				border-radius: 10rpx;
				margin-top: 40rpx;
				height: 120rpx;
				align-items: center;
				.info-tags-item{
					display: flex;
					flex-direction: column;
					flex: 1;
					align-items: center;
					position: relative;
					padding: 0;
					background-color: transparent;
					line-height: normal;
					&::after{
						position: absolute;
						content: '';
						width: 2rpx;
						height: 40rpx;
						background-color: #EBEBEB;
						left: inherit;
						right: 0;
						top: 50%;
						transform: translateY(-50%);
						border: none;
					}
					&:last-child::after{
						display: none;
					}
					image{
						width: 38rpx;
						height: 38rpx;
					}
					text{
						font-size: 24rpx;
						color: #757575;
						margin-top: 10rpx;
					}
				}
			}
		}
		.tags{
			display: flex;
			align-items: center;
			background-color: #FFF;
			padding: 0 30rpx 30rpx;
			.tags-item{
				flex: 1;
				height: 88rpx;
				line-height: 88rpx;
				box-shadow: 2rpx 4rpx 20rpx 0px rgba(40,34,31,0.06);
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 8rpx;
				font-size: 24rpx;
				color: #6B6B6B;
				image{
					width: 38rpx;
					height: 38rpx;
					margin-right: 10rpx;
					/* #ifdef MP-WEIXIN */
					margin-top: -8rpx;
					/* #endif */
				}
				/* #ifdef APP-PLUS || MP-WEIXIN */
				&:nth-child(2){
					margin: 0 20rpx;
				}
				/* #endif */
				button{
					font-size: 24rpx;
					border: none;
					background-color: transparent;
					line-height: 88rpx;
					color: #6B6B6B;
					image{
						vertical-align: middle;
					}
					&::after{
						display: none;
					}
				}
			}
		}
		.like-users{
			padding: 30rpx;
			background-color: #FFF;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.like-user-avatar{
				display: flex;
				align-items: center;
				.avatar{
					width: 48rpx;
					height: 48rpx;
					border: solid 4rpx #FFF;
					background-color: #EEE;
					border-radius: 50%;
				}
				.avatar:nth-child(n+2){
					margin-left: -28rpx;
				}
			}
			.like-user-empty{
				font-size: 24rpx;
				color: #999;
			}
			.like-users-arrow{
				color: #6B6B6B;
				font-size: 24rpx;
				text{
					margin-right: 10rpx;
				}
			}
		}
		.tie-in-preview-user{
			background-color: #FFF;
			padding: 30rpx;
			margin-top: 30rpx;
			.tie-in-preview-user-info{
				display: flex;
				align-items: center;
				justify-content: space-between;
				background-color: #F8F8F8;
				padding: 10rpx 20rpx;
				.user{
					font-size: 24rpx;
					display: flex;
					align-items: center;
					image{
						width: 68rpx;
						height: 68rpx;
						border-radius: 50%;
						margin-right: 20rpx;
					}
					.label{
						color: #8F8F8F;
					}
					.name{
						color: #000;
					}
				}
				.btn{
					width: 120rpx;
					height: 52rpx;
					background: #FFFFFF;
					border: 2rpx solid #EBEBEB;
					font-size: 22rpx;
					color: #909090;
					text-align: center;
					line-height: 48rpx;
				}
			}
		}
		.tie-in-preview-detaild{
			.tie-in-preview-detaild-tit{
				padding: 40rpx 30rpx;
				font-size: 28rpx;
			}
			.tie-in-preview-detaild-list{
				margin-top: 30rpx;
				.tie-in-preview-detaild-item{
					padding: 30rpx;
					background-color: #FFF;
					.space-item-name{
						display: flex;
						align-items: center;
						justify-content: space-between;
						margin-bottom: 10rpx;
						.space-item-name-left{
							font-weight: bold;
							font-size: 36rpx;
							.price{
								margin-left: 30rpx;
							}
						}
						.space-item-name-right{
							.checkebox{
								width: 40rpx;
								height: 40rpx;
								border: solid 2rpx #CCC;
								border-radius: 8rpx;
								line-height: 36rpx;
								text-align: center;
								&.active{
									background-color: #141414;
									border-color: #141414;
								}
							}
						}
					}
					.space-item-classs{
						margin-bottom: 30rpx;
						color: #808080;
						font-size: 26rpx;
					}
					.space-item-image{
						image{
							width: 100%;
							border: solid 1px #EEE;
						}
					}
					.space-item-goods-scroll{
						white-space: nowrap;
						margin: 0 -30rpx;
						width: auto;
						.space-item-goods-list{
							padding: 20rpx 0 50rpx;
						}
						.space-item-goods-item{
							display: inline-block;
							width: 250rpx;
							margin-right: 20rpx;
							border-radius: 4rpx;
							overflow: hidden;
							box-shadow: -2rpx 7rpx 40rpx 0px rgba(40,34,31,0.06);
							&:first-child{
								margin-left: 30rpx;
							}
							&:last-child{
								margin-right: 30rpx;
							}
							image{
								width: 250rpx;
								height: 250rpx;
								border-radius: 4rpx 4rpx 0 0;
							}
							.goods-name{
								font-size: 24rpx;
								text-align: center;
								white-space: nowrap;
								overflow: hidden;
								text-overflow: ellipsis;
								padding: 20rpx 20rpx 10rpx;
							}
							.price{
								padding: 0 20rpx 20rpx;
							}
						}
					}
				}
			}
		}
		.tie-in-preview-bot{
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			display: flex;
			align-items: center;
			height: 120rpx;
			padding: 0 30rpx;
			border-top: solid 1px #EEE;
			background-color: #FFF;
			z-index: 100;
			.tie-in-preview-bot-btns{
				flex: 1;
				min-width: 0;
				text-align: right;
				display: flex;
				justify-content: flex-end;
				font-size: 28rpx;
				.listing{
					display: flex;
					align-items: center;
					font-size: 24rpx;
				}
				.add-car{
					width: 155rpx;
					height: 80rpx;
					line-height: 80rpx;
					border: solid 1px #000;
					border-radius: 4rpx 0 0 4rpx;
					text-align: center;
					font-size: 24rpx;
					background-color: #000;
					color: #FFF;
					margin-left: 30rpx;
					&.go-design{
						background-color: #F59359;
						border-color: #F59359;
						color: #FFF;
					}
				}
				.my-tie-in{
					width: 155rpx;
					background-color: #F59359;
					color: #FFF;
					height: 80rpx;
					line-height: 80rpx;
					text-align: center;
					border-radius: 0 4rpx 4rpx 0;
					font-size: 24rpx;
				}
			}
			.tie-in-preview-bot-price{
				.tie-in-preview-bot-price-top{
					color: #5C5C5C;
					font-size: 20rpx;
				}
				.tie-in-preview-bot-price-bottom{
					color: #5C5C5C;
					font-size: 20rpx;
					text{
						font-size: 30rpx;
						font-weight: bold;
						color: #141414;
					}
				}
			}
		}
		.tie-in-preview-detaild-imgs{
			padding: 30rpx;
			background-color: #FFF;
			margin-top: 30rpx;
			.tie-in-preview-detaild-imgs-tit{
				font-weight: bold;
				text-align: center;
				font-size: 28rpx;
				background-color: #FFF;
				padding: 30rpx 0 0;
				color: #141414;
				font-weight: bold;
				&::before{
					margin-right: 30rpx;
				}
				&::after{
					margin-left: 30rpx;
				}
				&::before,&::after{
					content: '';
					display: inline-block;
					vertical-align: middle;
					height: 2rpx;
					width: 200rpx;
					background-color: #F4F4F4;
				}
			}
			.tie-in-preview-detaild-imgs-space-tit{
				font-size: 30rpx;
				font-weight: bold;
				padding: 30rpx 0;
			}
			image{
				width: 100%;
				border-radius: 8rpx;
			}
		}
	}
	.poster{
		position: relative;
		width: 100%;
		height: 100%;
		.poster-canvas{
			position: absolute;
			left: 50%;
			top: 50%;
			margin: -540rpx 0 0 -300rpx;
			border-radius: 8rpx;
			/deep/ canvas{
				border-radius: 8rpx;
			}
		}
		.close{
			position: absolute;
			top: 30rpx;
			right: 30rpx;
			z-index: 20;
		}
		.poster-share-btns{
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			display: flex;
			align-items: center;
			padding: 30rpx 0;
			background-color: #FFF;
			border-radius: 10rpx 10rpx 0 0;
			height: 150rpx;
			.poster-share-btn{
				flex: 1;
				text-align: center;
				.text{
					font-size: 24rpx;
					margin-top: 10rpx;
				}
				.poster-share-btn-image{
					width: 80rpx;
					height: 80rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					margin: 0 auto;
					image{
						width: 80rpx;
						height: 80rpx;
					}
				}
			}
		}
	}
	.like-success{
		image{
			width: 600rpx;
			height: 860rpx;
			border-radius: 8rpx;
		}
	}
	.active_banner{
		padding: 0 30rpx;
		background-color: #FFF;
		image{
			width: 100%;
			border-radius: 8rpx;
		}
	}
	.ask-list-tips{
		padding: 30rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.templeteMessage-box{
		width: 600rpx;
		padding: 40rpx;
		background-color: #FFF;
		border-radius: 10rpx;
		text-align: center;
		.templeteMessage-box-close{
			text-align: right;
			color: #999;
			margin-bottom: 25rpx;
		}
		.templeteMessage-tit{
			padding: 50rpx 0 30rpx;
			font-size: 32rpx;
			font-weight: bold;
			color: #141414;
		}
		.templeteMessage-subtit{
			color: #909090;
			font-size: 24rpx;
		}
		image{
			display: inline-block;
			width: 350rpx;
			height: 323rpx;
			border-radius: 10rpx;
		}
		.templeteMessage-btn{
			border-radius: 8rpx;
			height: 88rpx;
			line-height: 88rpx;
			text-align: center;
			background-color: #141414;
			color: #FFF;
			font-size: 28rpx;
			margin-top: 80rpx;
		}
	}
	.pro-list-box{
		padding: 30rpx 30rpx 150rpx;
		.tit{
			display: flex;
			align-items: center;
			text{
				margin-right: 20rpx;
				font-size: 36rpx;
				font-weight: bold;
			}
			image{
				width: 136rpx;
				height: 56rpx;
			}
		}
		.goods-list{
			max-height: 800rpx;
			margin-top: 30rpx;
			.goods-sapce{
				padding-left: 40rpx;
				position: relative;
				padding-bottom: 30rpx;
				&:last-child{
					padding-bottom: 0;
					&::before{
						bottom: 0;
					}
				}
				&::before{
					content: '';
					position: absolute;
					top: 20rpx;
					bottom: -30rpx;
					left: 8rpx;
					border-left: dashed 2rpx #CCC;
				}
				&::after{
					content: '';
					position: absolute;
					top: 20rpx;
					left: 0;
					border: solid 2rpx #000;
					border-radius: 50%;
					width: 16rpx;
					height: 16rpx;
					background-color: #FFF;
				}
				.space-tit{
					display: flex;
					align-items: center;
					justify-content: space-between;
					.name{
						font-size: 32rpx;
						font-weight: bold;
						text{
							font-weight: normal;
							font-size: 24rpx;
							color: #999;
							margin-left: 10rpx;
						}
					}
					.price{
						font-size: 24rpx;
						color: #757575;
						text{
							font-size: 32rpx;
							font-weight: bold;
							color: #000;
						}
					}
				}
				.space-goods{
					margin-top: 30rpx;
					.goods-item{
						background-color: #F7F7F7;
						display: flex;
						align-items: center;
						padding: 30rpx;
						.goods-img{
							image{
								width: 200rpx;
								height: 200rpx;
								border-radius: 8rpx;
							}
						}
						.goods-info{
							flex: 1;
							min-width: 0;
							margin-left: 30rpx;
							.goods-name{
								flex: 1;
								min-width: 0;
								white-space: nowrap;
								overflow: hidden;
								font-size: 24rpx;
								font-weight: bold;
							}
							.goods-sku{
								font-size: 22rpx;
								color: #808080;
								line-height: 36rpx;
								margin-top: 20rpx;
							}
							.goods-price{
								display: flex;
								align-items: center;
								justify-content: space-between;
								margin-top: 20rpx;
								text{
									font-family: 'din';
									text{
										font-size: 30rpx;
									}
								}
								.num{
									color: #666;
								}
							}
						}
					}
				}
			}
		}
	}
</style>
